import React from 'react'
// node在使用npm安装的时候 如果加上 --save  会将包的信息写到package.json中
import {
  connect, //  用于连接数据映射和修改数据映射方法的连接函数 返回值是一个新的组件
} from 'react-redux'

import { Button } from 'antd-mobile'
// ReactDOM.render(<Button>Start</Button>, mountNode)
import FootBar from '../component/FootBar'
import '../assets/css/reset.css'
class Myapp extends React.Component {
  render() {
    // 等同于 Vue中的 mapstate 和 mapMutation
    return (
      <div className="APP_bg">
        <Button onClick={this.startGo}>闯关答题</Button>
        <Button onClick={this.goSpecial}>专项答题</Button>
        <Button onClick={this.startCareer}>生涯模式</Button>
        {/* <button onClick={delClick}>-1</button> */}
        <FootBar info={this.props}></FootBar>
      </div>
    )
  }
  startGo = () => {
    this.props.history.push('/barrier')
  }
  startCareer = () => {
    this.props.history.push('/career')
  }
  goSpecial = () => {
    this.props.history.push('/special')
  }
}

// 将state银映射到props中
function mapStateToProps(state) {
  return {
    value: state.num,
  }
}

// 进啊给修改state数据的方法映射到props
function mapDispatchToProps(dispatch) {
  return {
    addClick: () => {
      dispatch({ type: 'add' })
    },
    addClick5: () => {
      dispatch({ type: 'addNum', num: 5 })
    },
  }
}

// 将上面的两个方法 ，将数据仓库的state和修改state数据的方法映射到新组件上
const App = connect(mapStateToProps, mapDispatchToProps)(Myapp)

export default App
